@import "@{root}/style/mixins/card-border-rounded";
@import "@{icon}";

.commentcontainer {
  .commentview {
    display: flex;
    flex-direction: column;

    .commentview-info {
      display: flex;
      flex-direction: column;
      margin-left: 32rpx;
      margin-top: 32rpx;
      .userblock {
        display: flex;
        flex-direction: row;
        .avatar {
          height: 72rpx;
          width: 72rpx;
          border-radius: 50%;
          flex-shrink: 0;
          background-color: white;
          background-size: cover;
          background-position: center center;
        }
        .userblock-info {
          display: flex;
          flex-direction: column;
          margin-left: 28rpx;
          justify-content: center;
          flex: 1;
          .userblock-info-name-date {
            flex-direction: row;
            display: flex;

            justify-content: space-between;
            .name {
              font-size: 32rpx;
              color: rgba(0, 0, 0, 0.87);
            }

            .date {
              font-size: 26rpx;
              color: rgba(0, 0, 0, 0.54);
              margin-right: 44rpx;
            }
          }

          .position {
            font-size: 26rpx;
            color: rgba(0, 0, 0, 0.54);
          }
        }
      }

      .content {
        margin-top: 22rpx;
        margin-left: 100rpx;
        margin-right: 42rpx;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.87);
      }
    }

    .commentview-replyinfo {
      display: flex;
      flex-direction: row;
      margin-top: 32rpx;
      margin-left: 32rpx;
      .avatarbackground {
        .avatar {
          height: 72rpx;
          width: 72rpx;
          border-radius: 50%;
          flex-shrink: 0;
          background-color: white;
          background-size: cover;
          background-position: center center;
        }
      }

      .replyinfo {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 28rpx;
        .replyinfo {
          flex: 1;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .name {
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.54);
          }
          .date {
            flex: 1;
            text-align: right;
            font-size: 26rpx;
            color: rgba(0, 0, 0, 0.54);
            margin-right: 44rpx;
          }
        }

        .content {
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.54);
          background-color: white;
          border-radius: 8rpx;
          margin-left: 20rpx;
          margin-right: 16rpx;
          margin-top: 16rpx;
        }
      }
    }

    .comment-handle {
      display: flex;
      flex-direction: row;
      background-color: white;
      margin-right: 42rpx;
      margin-top: 12rpx;
      .comment-holder {
        flex: 1;
      }
      button {
        line-height: 40rpx;
      }
      .favourbutton {
        color: rgba(0, 0, 0, 0.54);
        background-color: white;
        padding: 0rpx;
        .iconfont {
          font-size: 28rpx;
        }
        .favourbutton_text {
          margin-left: 4rpx;
          color: fade(#000, 54%);
          font-size: 28rpx;
        }
        .favourbutton_textlv {
          margin-left: 4rpx;
          color: fade(#2F978A, 100%);
          font-size: 28rpx;
        }
      }

      .favourbutton::after {
        border: 0rpx;
      }

      .replybutton {
        color: rgba(0, 0, 0, 0.54);
        background-color: white;
        padding: 0rpx;
        margin-left: 22rpx;
        .iconfont {
          color: #8c8582;
          font-size: 28rpx;
          margin-top: 2rpx;
        }
        .replybutton_text {
          margin-left: 6rpx;
          color: fade(#000, 54%);
          font-size: 28rpx;
        }
      }

      .replybutton::after {
        border: 0rpx;
      }

      .deletebutton {
        color: rgba(0, 0, 0, 0.54);
        background-color: white;
        padding: 0rpx;
        margin-left: 22rpx;
        .iconfont {
          color:#8c8582;
          font-size: 28rpx;
        }
        .deletebutton_text {
          margin-left: 4rpx;
          color: fade(#000, 54%);
          font-size: 28rpx;
        }
      }

      .deletebutton::after {
        border: 0rpx;
      }

      .sharebutton {
        color: rgba(0, 0, 0, 0.54);
        background-color: white;
        padding: 0rpx;
        margin-left: 22rpx;
        .iconfont {
          color: #8c8582;
          font-size: 28rpx;
        }
        .sharebutton_text {
          margin-left: 4rpx;
          color: fade(#000, 54%);
          font-size: 28rpx;
        }
      }

      .sharebutton::after {
        border: 0rpx;
      }
    }

    .bottomline {
        height: 1rpx;
        background-color: rgba(0, 0, 0, 0.1);
        margin-left: 112rpx;
        margin-top: 12rpx;
      }
  }
}
